<template>
  <view class="comment-detail">
    <view class="review-title">
      <image class="review-faceUrl" :src="props.item.customerAvatar"/>
      <view style="flex:1; padding-left: 10rpx">
        <view class="name-top">
          <view class="nickname">{{ props.item.customerNickname }}</view>
          <view>{{ props.item.createdAt }}</view>
        </view>
        <view style="display:flex;align-items:center;justify-content: space-between;">
          <view class="star-level">
            <image class="itmsf" v-for="level in 5" :key="level" :src="props.item.starLevel >= level ? 'https://img.qumoyugo.com/webimgbg/picopino_icon_events_dt_active_pfs.png' : 'https://img.qumoyugo.com/webimgbg/picopino_icon_events_dt_pingfen.png'"></image>
          </view>
          <view v-if="props.item.isMyComment">
            <img src="https://img.qumoyugo.com/img/M6NV5M8T7U1WJCDXJBFGY1715849184615.png" style="width: 48rpx;height: 48rpx;" @click="deleteComment">
          </view>
        </view>
        <view class="review-box">
          <rich-text :nodes="serialDescription(props.item.content)"></rich-text>
        </view>
        <view class="img-box" :style="{width: imageList.length === 4 ? '350rpx' : 'auto'}" v-if="imageList.length">
          <view v-for="(image, index) in imageList" :key="image" class="xm-it">
            <image class="img-s" mode="aspectFill" :src="image" @click="previewImg(index)"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
  item: {
    type: Object,
    default: () => {}
  },
  index: {
    type: Number,
    default: -1
  }
})
const emit = defineEmits(['delete'])
const imageList = computed(() => {
  return props.item.images ? props.item.images.split(',') : []
})
const previewImg = (index) => {
  uni.previewImage({
    current: index,
    urls: imageList.value
  })
}
const serialDescription = (description) => {
  return description?.replace(/ /g, '\xa0').replace(/\n/g, '<br/>')
}
const deleteComment = () => {
  uni.showModal({
    title: '提示',
    content: '确定要删除该评论？',
    confirmColor: '#EE751E',
    success (res) {
      if (res.confirm) {
        emit('delete', props.item.id, props.index)
      }
    }
  })
}
</script>

<style scoped lang="scss">
.review-title{
  padding: 20rpx 0;
  display: flex;
  .review-faceUrl{
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
  }
  .name-top{
    display: flex;
    justify-content: space-between;
    color: #737373;
    font-size: 22rpx;
  }
  .nickname{
    font-size: 26rpx;
    font-weight: bold;
  }
  .star-level{
    display: flex;
    padding: 3rpx 6rpx;
    background-color: rgba(0,0,0,0.06);
    border-radius: 6rpx;
    margin-top: 8rpx;
    .itmsf{
      width: 26rpx;
      height: 26rpx;
      margin: 0 2rpx;
    }
  }
}
.review-box{
  margin: 20rpx 0;
  font-size: 24rpx;
  color: #000000;
}
.img-box{
  display: flex;
  flex-wrap: wrap;
  .xm-it{
    width: 160rpx;
    margin-right: 10rpx;
    margin-bottom: 10rpx;
  }
  .img-s{
    width: 160rpx;
    height: 160rpx;
  }
}
</style>
